<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
%>
<%  
    response.setHeader("Cache-Control","no-store");  
    response.setDateHeader("Expires", 0);  
    response.setHeader("Pragma","no-cache");   
%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="copyright" content="Tencent"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>设置头像</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/s04.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/mui.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/image-clip.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/clip.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/bootstrap.min.css" >
  	<link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/cropper.css" >
    
</head>
<body>
	<div id="headDiv" class="clip-content">
		<div class="l-wrapper" id="stateCircle" style="display: none;">
			<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			      <g id="circle" class="g-circles g-circles--v1">
			          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
			          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
			          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
			          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
			          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
			          <circle id="7" cx="60" cy="110" r="10"></circle>
			          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
			          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
			          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
			          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
			          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
			          <circle id="1" cx="60" cy="10" r="10"></circle>
			      </g>
		
			      <use xlink:href="#circle" class="use"/>
			</svg>
		</div>
		<div id="upload-container">
			<c:choose>
           		<c:when test="${bmcompanyCard.headPicture != null && bmcompanyCard.headPicture != ''}">
           			<img id="headpic" src="${bmcompanyCard.headPicture }" />
           		</c:when>
           		<c:otherwise>
           			<img id="headpic" src="<%=path%>/images/companycard/people.png" />
           		</c:otherwise>
           	</c:choose>
	    </div>
	    <div class="img-container" style="display: none;">
	    	<img id="imgElement" src="" alt="">
        </div>
	    <nav class="clip-action nav-bar nav-bar-tab" id="clip-action" style="display: none;">
	          <a class="tab-item" id="btn-reload">
	              <span class="mui-icon mui-icon-arrowleft tab-icon"></span>
	              <span class="tab-label" style="display: none;">取消</span>
	          </a>
	          <!-- <a class="tab-item " id="btn-rotate-anticlockwise" data-method="rotate" data-option="-45">
	              <span class="mui-icon mui-icon-refreshempty tab-icon rotate90"></span>
	              <span class="tab-label" style="display: none;">逆时针旋转</span>
	          </a>
	          <a class="tab-item " id="btn-rotate-clockwise" data-method="rotate" data-option="45">
	              <span class="mui-icon mui-icon-refreshempty tab-icon"></span>
	              <span class="tab-label" style="display: none;">顺时针旋转</span>
	          </a> -->
	          <a class="tab-item" id="btn-verify" data-toggle="tooltip" data-method="getCroppedCanvas">
	              <span class="mui-icon mui-icon-checkmarkempty tab-icon"></span>
	              <span class="tab-label" style="display: none;">确定</span>
	          </a>
	    </nav>
	</div>
    <script type="text/javascript" src="<%=path%>/js/companycard/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <script type="text/javascript" src="<%=path%>/js/companycard/plupload.full.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/companycard/exif.js"></script>
    <script type="text/javascript" src="<%=path%>/js/companycard/image-clip.js"></script>
    
    <script type="text/javascript" src="<%=path%>/js/companycard/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/companycard/cropper.js"></script>
    <script type="text/javascript">
    
    $("#headDiv").css({width:"100%",height:$(window).height()+"px",'line-height':$(window).height()+"px"});
	$("#headpic").css({width:"100%",height:$(window).width()+"px"});
    //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
    	browse_button : 'headpic',
    	multi_selection: false,
    	url : '<%=path%>/api/uploadfile/file',
    	unique_names : true,
    	resize : {crop : true, preserve_headers : false, type : "image/jpeg", width : 1000, height : 1000, quality : 100 },
    	init:{
    		//当队列中的某一个文件正要开始上传前触发
    		BeforeUpload: function(uploader,file){
    			var f = file.name;
    			if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){
    				alert("图片类型不正确，请重新选择");
    		        return;
    			}
    	    },
    		//绑定文件添加进队列事件
    		FilesAdded: function(uploader,files){    
    			var state = $("#stateCircle").css("display");
    			if(state != "block"){
    				loadImg(files);
    			}
    		},
    		//会在文件上传过程中不断触发，可以用此事件来显示上传进度
    		UploadProgress: function(uploader,file){
    			$("#stateCircle").css({"display":"block","position":"fixed","z-index":"1"});
    	    },
    	  	//当队列中的某一个文件上传完成后触发
    	    FileUploaded: function(uploader,file,responseObject){
    	    	//服务断接收完文件返回的结果
    	        var data = JSON.parse(responseObject.response);
    	        if(data.status == "200") {
    	            toModifyHeadPic(data.realSavePath);
    	        }else{
    	      	  alert("设置失败");
    	            window.location.href = "<%=path%>/mobile/toUpdateCardInfo?point=1";
    	        }
    	    },
    	  	//当发生错误时触发
    		Error: function(uploader,errObject){
    			alert("设置失败");
    	        window.location.href = "<%=path%>/mobile/toUpdateCardInfo?point=1";
    	    }
    	}
    })
  	//在实例对象上调用init()方法进行初始化
    uploader.init();
    initListeners();
    
    var image = document.getElementById('imgElement');
    var options = {
   		aspectRatio: 1,
        autoCropArea: 0.65
    }
    var cropper = new Cropper(image, options);
    function loadImg(files){   	
    	var file = files[files.length-1];
    	$(".img-container").css({"height":"100%","display":"block"});
    	if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
            var fr = new mOxie.FileReader();
            fr.onload = function () {
	           	image.src = fr.result;
	           	cropper.destroy();
	            cropper = new Cropper(image, options);
	        	changeImgClipShow(true);
	           	fr.destroy();
	           	fr = null;
            }
            fr.readAsDataURL(file.getSource());
        } else {
            var preloader = new mOxie.Image();
            preloader.onload = function () {
                var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
                image.src = imgsrc;
                cropper.destroy();
                cropper = new Cropper(image, options);
	      	    changeImgClipShow(true);
	            preloader.destroy();
	            preloader = null;
            };
            preloader.load(file.getSource());
        }
    }
    
    function changeImgClipShow(isClip) {
        if (isClip) {
        	$("#upload-container").css({"display":"none"});
        	$("#headDiv").css({"line-height":"0"});
        	$("#clip-action").css({"display":"block"});
        } else {
        	location.reload();
        }
    }
    
  	function toModifyHeadPic(headPic){
  		var hp = "${bmcompanyCard.headPicture }";
  		if(headPic != "" && headPic !=null &&headPic != undefined){
  			hp = headPic;
       	}
  		$.ajax({
       		  url: "<%=path%>/mobile/ajaxUpdateBusinessCardInfo",
       		  type: "post",		      	  
       		  async: false,
       		  data:{
       			  "id":"${bmcompanyCard.id}",
       			  "headPicture":hp
       		  },
       		  dataType: "json",
       		  timeout: 1000,
       		  error: function(){},
       		  success: function(data){ 
       			//console.log(data);
       			  //data=JSON.parse(data);
       			if (data.status == "200") {
         			// alert("success");
         			$("#stateCircle").hide();
         			window.location.href = "<%=path%>/view/mobile/pageMobileMain";
         		  }else if(data.status == "20028"){
         			  alert("会话过期，请重新登录");
         			  window.location.href = "<%=path%>/mobile/toLogin";
         		  }else{
         			 window.location.href = "<%=path%>/mobile/pageUserInfoSetting"; 			 
         		  }
       		  }
       		});
  	}
  	
  	
  	function initListeners() {
        document.querySelector('#btn-reload').addEventListener('click', function() {
            changeImgClipShow(false);
        });
        //document.querySelector('#btn-rotate-anticlockwise').addEventListener('click', function() {
        //   var data = $(this).data();
        //   cropper[data.method](data.option);
        //   cropper.clear();
        //   cropper.crop();
        //});
        //document.querySelector('#btn-rotate-clockwise').addEventListener('click', function() {
        //	var data = $(this).data();
        //    cropper[data.method](data.option);
        //    cropper.clear();
        //    cropper.crop();
        //});
        document.querySelector('#btn-verify').addEventListener('click', function() {
        	var canvas  = cropper['getCroppedCanvas']({ 'maxWidth': 4096, 'maxHeight': 4096 });
        	var state = $("#stateCircle").css("display");
			if(state == "block"){
				alert('请等待，正在设置中。。。');
				return;
			}
        	var isConfirm = confirm("是否裁剪图片并处理？");
            
            if (isConfirm) {
            	$("#stateCircle").css({"display":"block","position":"fixed","z-index":"1"});
                recognizeImg(function() {
	               	//删除原文件
	               	var file = uploader.files[uploader.files.length-1];
	               	uploader.removeFile(file);
	               	//添加新文件
	               	canvas.toBlob(function(blob) {
	               		uploader.addFile(blob);
	               		uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
	               	});
                }, function(error) {
                    tips(JSON.stringify(error), true);
                });
            }
        });
    }
  	function recognizeImg(success, error) {
        // 里面正常有：裁边，摆正，梯形矫正，锐化等算法操作
        success();
    }
    </script>
</body>
</html>